# Desplegable / Dropdown

### Código

```
<dropdown></dropdown>
```



### Tokens

**Color**

| Element            | Property         | Color token                  |
| :----------------- | :--------------- | :--------------------------- |
| Label              | text color       | `$text-02`                   |
| Field text         | text color       | `$text-01`                   |
| Field text: prompt | text color       | `$text-05`                   |
| Helper text        | text color       | `$text-05`                   |
| Field              | background-color | `$field-01`                  |
|                    | border-bottom    | `$ui-04`                     |
| Field: light       | background-color | `$field-02`                  |
| Chevron            | svg              | `$icon-01`                   |
| Menu option        | text color       | `$text-02`                   |
|                    | background-color | `$field-01`                  |
|                    | border-top       | `$ui-03`                     |
| Menu option: light | background-color | `$field-02`                  |
| Menu               | box-shadow       | `0 2px 6px 0 rgba(0,0,0,.2)` |
| Checkbox           | background-color | `$icon-01`                   |
|                    | check            | `$inverse-01`                |
|                    | border           | `$icon-01`                   |

| State          | Element            | Property         | Color token          |
| :------------- | :----------------- | :--------------- | :------------------- |
| Focus          | Field              | border           | `$focus`             |
| Hover          | Field              | background-color | `$hover-ui`          |
|                | Menu option        | background-color | `$hover-ui`          |
|                | Menu option        | text color       | `$text-01`           |
|                | Field: light       | background-color | `$hover-light-ui`    |
|                | Menu option: light | background-color | `$hover-light-ui`    |
| Invalid        | Error icon         | svg              | `$support-01`        |
|                | Field              | border           | `$support-01`        |
|                | Error message      | text-color       | `$text-error`        |
| Warning        | Warning message    | text-color       | `$text-01`           |
|                | Warning icon       | svg              | `$support-03`        |
| Active         | Menu option        | background-color | `$selected-ui`       |
|                | Menu option: light | background-color | `$selected-light-ui` |
| Selected       | Menu option        | background-color | `$selected-ui`       |
|                | Menu option        | checkmark        | `$icon-01`           |
| Multi-selected | Tag                | background-color | `$inverse-02`        |
|                | Tag                | text color       | `$inverse-02`        |
| Disabled       | Field              | background-color | `$disabled-01`       |
|                | Field              | text color       | `$disabled-02`       |
|                | Label              | text color       | `$disabled-02`       |
|                | Chevron            | svg              | `$disabled-02`       |

**Tipografía**

| Class            | Type style        |
| :--------------- | :---------------- |
| Label            | `$label-01`       |
| Field text       | `$body-short-01`  |
| Menu option text | `$body-short-01`  |
| Error message    | `$label-01`       |
| Helper text      | `$helper-text-01` |

**Estructura**

| Element     | Property                    | Spacing tokens |
| :---------- | :-------------------------- | :------------- |
| Label       | margin-bottom               | `$spacing-03`  |
| Field       | padding-left                | `$spacing-05`  |
|             | padding-right               | `$spacing-09`  |
|             | border-bottom               | –              |
| Chevron     | padding-right, padding-left | `$spacing-05`  |
| Helper text | margin-top                  | `$spacing-02`  |
| State icon  | padding-right, padding-left | `$spacing-05`  |